<template>
  <div id="mychart"></div>
</template>
<script>
export default {
  name: 'LineComponent',
  props: ['chartData', 'chartTitle', 'chartColor'],
  data () {
    return {
      mychart: null,
      title: '年维修单统计',
      legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
      color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a'],
      // xAxis: {
      //   name: '月份',
      //   data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      // },
      yAxis: {
        name: '总量',
        data: [
          { name: '邮件营销', data: [120, 132, 101, 134, 90, 230, 210] }
        ]
      }
    }
  },
  mounted () {
    let self = this;
    self.initChart(self.chartData);
    self.updateTitle(self.chartTitle);
    self.updateColor(self.chartColor);
    self.$on('updateData', self.initChart);
    self.$on('updateTitle', self.updateTitle);
    self.$on('updateColor', self.updateColor);
  },
  methods: {
    initChart (chartData) {
      let self = this
      self.mychart = self.$echarts.init(document.getElementById('mychart'))
      self.legend = []
      self.xAxis = {}
      self.series = []
      if (JSON.stringify(chartData) != "{}") {
        let xTitle = Object.assign([], chartData.xTitle)
        let yTitle = chartData.yTitle.map(function (item) { return { name: item.name, description: item.description } });
        let xFieldData = Object.assign([], chartData.xFieldData)
        let yFieldData = Object.assign([], chartData.yFieldData)
        for (let i = 0; i < yTitle.length; i++) {
          if (yTitle[i].description == '') self.legend.push(yTitle[i].name);
          else self.legend.push(yTitle[i].description);
          self.series.push({
            name: yTitle[i].description == '' ? yTitle[i].name : yTitle[i].description,
            type: 'line',
            data: yFieldData[i]
          }
          )
        }
        self.mychart.setOption({
          title: {
            text: self.title,
            x: 'center'
          },
          legend: {
            data: self.legend,
            bottom: 10
          },
          grid: {
            // top: 80,
            // x: 100,
            // x2: 30,
            // y2: 80
            left: '5%',
            right: '5%',
          },
          color: self.color,
          tooltip: {},
          xAxis: {
            name: xTitle[0].description == '' ? xTitle[0].name : xTitle[0].description,
            axisTick: {
              show: false
            },
            data: xFieldData
          }
          ,
          yAxis: {
            name: '',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            minInterval: 1
          },
          series: self.series
        })
      }
    },
    updateTitle (value) {
      let self = this;
      self.title = value;
      self.mychart.setOption({
        title: {
          text: self.title
        }
      })
    },
    updateColor (value) {
      let self = this;
      self.color = value.map(function (item) { return item.value });
      self.mychart.setOption({
        color: self.color
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
#mychart
  width 10rem
  height 4.8rem
</style>